<template>
	<view class="oprofit-index" :style="{ backgroundImage: 'url(' + $util.img('upload/uniapp/shop_uniapp/extension/order_bg.png') + ')' }">
		<view class="oprofit-select">
			<picker class="selected" @change="bindShopPickerChange" :value="shopPicker.index" :range="shopPicker.arr">
				<view class="uni-input">{{shopPicker.name}}</view>
				<image class="selected-right" :src="$util.img('/upload/uniapp/shop_uniapp/extension/order_jt.png')" mode=""></image>
			</picker>
		</view>
		<!-- 数据概况 -->
		<view class="trading_statistics margin_none">
			<view class="title">
				<view class="title_left">数据概况</view>
				<view class="title_right color-base-border">
					<text @click="transactionChange('today')" :class="{ active: time == 'today' }">今日</text>
					<text @click="transactionChange('yesterday')" :class="{ active: time == 'yesterday' }">昨日</text>
					<text @click="transactionChange('all')" :class="{ active: time == 'all' }">总计</text>
				</view>
			</view>
			<view class="content">
				<view>
					<view class="color-tip">订单数</view>
					<view class="num">{{data.order_count}}</view>
				</view>
				<view>
					<view class="color-tip">总金额（元）</view>
					<view class="num">{{data.tatol_order_money}}</view>
				</view>
				<view>
					<view class="color-tip">预计收益（元）</view>
					<view class="num">{{data.tatol_shop_money}}</view>
				</view>
			</view>
		</view>
		
		<!-- tab选项 -->
		<view class="oprofit-tab">
			<view class="tab-itmes"	:class="[is_settlement == key ? 'tab-itmes-active' : '']"
			v-for="(tab,key) in oprofit_tab" :index="key" @click="switchTab(key)">
				{{tab.title}}
			</view>
		</view>
		
		<!-- 列表数据 -->
		<!-- 列表数据 -->
		<mescroll-uni class="list-wrap" @getData="getListData" top="540" refs="mescroll" :size="10">
			<block slot="list">
				<view v-if="profit_list.length > 0">
					<view class="oprofit-box" v-for="(items,index) in profit_list" :index="index">
						<view class="flex-col-between">
							<view class="flex-col-start">
								<image class="shop-logo" :src="$util.img('/upload/uniapp/shop_uniapp/extension/order_shop.png')" mode=""></image>
								<view class="shop-name">{{items.site_name}}</view>
							</view>
							<view class="order-status">{{items.settlement}}</view>
						</view>
						<view class="">						
							<view class="oflex-box flex-col-start" v-for="(order,key) in items.goods" :index="key">
								<view class="oflex-goods-image">
									<image class="goods-image" :src="order.sku_image" mode=""></image>
									<view class="oflex-abs" v-if="order.refund_status">{{order.refund_status_name}}</view>
								</view>
								<view class="oflex-right">
									<view class="goods-name">{{order.sku_name}}</view>
									<view class="flex-col-between">
										<view class="goods-price">¥{{order.order_money}}</view>
										<view class="goods-num">x{{order.num}}</view>
									</view>
									<view class="flex-col-between">
										<view class=""></view>
										<view class="flex-col-start">
											<view class="profit-tit">预计佣金</view>
											<view class="profit-tit profit-val">¥{{order.shop_money}}</view>
										</view>
									</view>	
								</view>
							</view>
						</view>
						
						<view class="order-no">订单号：{{items.order_no}}</view>
						<view class="flex-col-between">
							<view class="order-time">下单时间：{{items.date}}</view>
							<view class="flex-col-start">
								<view class="profit-tit">合计预计佣金</view>
								<view class="profit-tit profit-val">¥{{items.shop_money}}</view>
							</view>
						</view>	
					</view>
					
				</view>
				<ns-empty v-else text="暂无订单佣金记录"></ns-empty>
			</block>
		</mescroll-uni>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time: 'all',
				data: {
					order_count: 0,
					tatol_order_money: '0.00',
					tatol_shop_money: '0.00'
				},
				shopList: [{
					site_id: 0,
					site_name: '全部推荐商家'
				}],
				shopPicker: {
					index: 0,
					name: '全部推荐商家',
					arr: [],
				},
				profit_list: [],
				subordinate_site_id: 0,
				is_settlement: 0,
				oprofit_tab: [
					{
						title: '全部',
					},{
						title: '待结算',
					},{
						title: '已结算',
					},{
						title: '已退款',
					}
				]
			}
		},
		methods: {
			transactionChange(val) {
				this.time = val;
				this.profit_list = [];
				this.mescroll.resetUpScroll();
			},
			switchTab(index) {
				this.is_settlement = index;
				this.profit_list = [];
				this.mescroll.resetUpScroll();
			},
			bindShopPickerChange(e) {
				if (this.shopPicker.arr.length == 0) return;
				this.shopPicker.index = e.target.value;				
				this.subordinate_site_id = this.shopList[this.shopPicker.index].site_id;
				this.shopPicker.name = this.shopList[this.shopPicker.index].site_name;
				this.profit_list = [];
				this.mescroll.resetUpScroll();
			},
			getShopList() {
				this.$api.sendRequest({
					url: '/shopapi/inviteCode/getSubordinateShop',
					data: {},
					success: res => {
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data) {
							this.shopList = this.shopList.concat(res.data);
							this.shopList.forEach((item, key) => {
								this.shopPicker.arr.push(item.site_name);
								if (this.subordinate_site_id == item.site_id) {
									this.shopPicker.index = key;
									this.shopPicker.name = item.site_name;
								}
							});
						}
					}
				});
			},
			getListData(mescroll) {
				let data = {
					page_size: mescroll.size,
					page: mescroll.num,
					time: this.time,
					is_settlement: this.is_settlement,
					subordinate_site_id: this.subordinate_site_id
				};
				this.mescroll = mescroll;
				this.$api.sendRequest({
					url: '/shopapi/inviteCode/getOrderList',
					data: data,
					success: res => {
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
							this.data.order_count = res.data.count;
							this.data.tatol_order_money = res.data.tatol_order_money;
							this.data.tatol_shop_money = res.data.tatol_shop_money;
						} else {
							this.$util.showToast({ title: msg });
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.profit_list = []; //如果是第一页需手动制空列表
						newArr.forEach(v => {
							v.is_off = 0;
						});						
						
						this.profit_list = this.profit_list.concat(newArr); //追加新数据					
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
		},
		onLoad(e) {
			if (e.subordinate_site_id) {
				this.subordinate_site_id = e.subordinate_site_id;
			}
			this.getShopList();
		}
	}
</script>

<style lang="scss">
.oprofit-index {
	background-size: 750upx 1206px;
	background-repeat: no-repeat;
	background-position: left top;
	
	width: 100%;
	height: 100vh;
	background: #F8F8F8;
	overflow: hidden;
	
	.oprofit-select {
		width: 660upx;
		height: 70upx;
		line-height: 70upx;
		background: #FFFFFF;
		border-radius: 35upx;
		margin: 30upx;
		padding-left: 30upx;
		
		.selected {
			position: relative;
			height: 70upx;
			.selected-right {
				position: absolute;
				top: 15upx;
				right: 30upx;
				width: 40upx;
				height: 40upx;
			}
		}
		.uni-input {
			line-height: 70upx;
		}
	}
	
	.trading_statistics {
		margin: $margin-both;
		background-color: #fff;
		border-radius: $border-radius;
		&.margin_none {
			margin-top: 0;
		}
		&.padding {
			padding-left: 0 !important;
			padding-right: 0 !important;
		}
		.order{
			/deep/ .uni-grid-item__box.uni-grid-item__box-square{
				padding-top: 120%;
			}
			image{
				margin-top: 10rpx;
			}
		}
		.title {
			display: flex;
			padding:30rpx 30rpx 0;
			.title_left {
				flex: 1;
				font-size: $font-size-toolbar;
				font-weight: bold;
			}
			.title_right {
				border: 1px solid;
				height: 46rpx;
				font-size: 0;
				border-radius: 46rpx;
				overflow: hidden;
				text {
					display: inline-block;
					width: 80rpx;
					height: 46rpx;
					line-height: 46rpx;
					text-align: center;
					font-size: $font-size-tag;
					color: $color-tip;
					&.active {
						background: #ff6a00;
						color: #fff;
						border-radius: 46rpx;
					}
				}
			}
		}
		.content {
			display: flex;
			flex-wrap: wrap;
			padding:0 30rpx 30rpx;
			> view {
				overflow: hidden;
				flex:1;
				margin-top: 42rpx;
				.num {
					font-size: 36rpx;
					overflow:hidden; //超出的文本隐藏
					text-overflow:ellipsis; //溢出用省略号显示
					white-space:nowrap; //溢出不换行
				}
			}
		}
		.grid {
			&.margintop {
				margin-top: 40rpx;
			}
			.grid_item {
				text-align: center;
				position: relative;
				.image {
					width: 80rpx;
					height: 80rpx;
					min-height: 80rpx;
				}
				.image50 {
					width: 50rpx;
					height: 50rpx;
					min-height: 50rpx;
				}
	
				.text {
					color: $color-title;
				}
				.num {
					position: absolute;
					top: 0rpx;
					right: -10rpx;
					background-color: #ff5630;
					height: 30rpx;
					line-height: 30rpx;
					min-width: 22rpx;
					padding: 0 4rpx;
					border-radius: 40rpx;
					text-align: center;
					color: #fff;
					font-size: $font-size-activity-tag;
				}
			}
		}
		.ucharts {
			margin-top: 47rpx;
		}
	}
	
	.oprofit-tab {
		width: 690upx;
		height: 94upx;
		background: #FFFFFF;
		border-radius: 8upx;
		margin: 30upx 30upx 0;
		
		.tab-itmes {
			display: inline-block;
			height: 90upx;
			line-height: 90upx;
			color: #303133;
			margin: 0 45upx;
		}
		.tab-itmes-active {
			color: #FF6A00;
			border-bottom:4upx solid #FF6A00;
		}
	}
	
	.oprofit-box {
		width: 630upx;
		// height: 580upx;
		background: #FFFFFF;
		border-radius: 8upx;
		margin: 0 30upx 20upx 30upx;
		padding: 30upx;
		
		.shop-logo {
			width: 32upx;
			height: 30upx;
		}
		.shop-name {
			height: 40upx;
			font-size: 28upx;
			color: #303133;
			line-height: 40upx;
		}
		.order-status {
			width: 72upx;
			height: 34upx;
			font-size: 24upx;
			color: #303133;
			line-height: 34upx;
		}
		.oflex-box {
			background: #F8F8F8;
			margin-top: 20upx;
			&:first-child {
				margin-top: 30upx;
			}
		}
		.oflex-right {
			width: 420upx;
			margin-left: 20upx;
			padding-right: 30upx;
		}
		.oflex-goods-image {
			position: relative;
			width: 160upx;
			height: 160upx;
			.goods-image {
				width: 160upx;
				height: 160upx;
			}
			
			.oflex-abs {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 160upx;
				height: 40upx;
				background: rgba(48, 49, 51, 0.5);
				border-radius: 0upx 0upx 8upx 8upx;
				text-align: center;
				font-size: 24upx;
				color: #FFFFFF;
				line-height: 40upx;
			}
		}			
		
		.goods-name {
			width: 420upx;
			//超过两行省略号
			overflow: hidden;
			text-overflow: ellipsis;
			display: box;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.goods-price {
			height: 40upx;
			font-size: 20upx;
			color: #303133;
			line-height: 28upx;
		}
		.goods-num {
			height: 24upx;
			font-size: 24upx;
			color: #909399;
			line-height: 24upx;
		}
		.order-no {
			margin-top: 30upx;
			height: 34upx;
			font-size: 24upx;
			color: #909399;
			line-height: 34upx;
		}
		.order-time {
			height: 34upx;
			font-size: 24upx;
			color: #909399;
			line-height: 34upx;
		}
		.profit-tit {
			height: 40upx;
			font-size: 24upx;
			font-weight: 400;
			color: #909399;
			line-height: 33upx;
			margin-top: 12upx;
		}
		
		.profit-val {
			color: #FF6A00;
		}
	}
}
</style>
